<template>
  <div v-if="newslistData">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="查询新闻">
        <el-input
          placeholder="请输入查询新闻标题关键字"
          prefix-icon="el-icon-search"
          v-model="formInline.kw"
          @keyup.enter.native="enterSearch()"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table max-height="500px" :data="newslistData.slice((nowNewsPage-1)*pageSize,nowNewsPage*pageSize)" style="width: 100%" >
      <el-table-column align="center" type="index" label="序号" width="180"> </el-table-column>
      <el-table-column align="center" prop="newsClass" label="新闻分类" width="180"> </el-table-column>
      <el-table-column align="center" label="标题" width="180">
          <template slot-scope="scope">
            <!-- <router-link to="/news_modify">{{ scope.row.title }}</router-link> -->
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
      </el-table-column>
      <el-table-column align="center" prop="introduction" label="简介"> </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pageArea" v-if="newslistData">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="nowNewsPage"
        @current-change="handleCurrentChange"
        :total="newslistData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input2: "",
      formInline: {
        kw: "",
      },
      newslistData:[],
      nowNewsPage:1,
      pageSize: 8 // 每页的数据条数
    };
  },
  mounted(){
    this.getNewslistData()
  },
  watch:{
    nowNewsPage(val){
      console.log(`当前页改变了:`+val);
    }
  },
  methods: {
    handleCurrentChange(val){
      console.log(`当前第几页:`+val);
      this.nowNewsPage = val
    },
    handleEdit(index, row) {
        console.log(index, row);
        this.$router.push(`/news_modify/${row.id}`)
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该条新闻, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = `news/delete`
          let args = `id=${row.id}`
          console.log(args);
          this.axios.delete(url,args).then(res=>{
            console.log(res);
            if(res.status == 200 ){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          })

          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      
      searchkw(){
        let url = ""
        let kwstr = this.formInline.kw.trim()
        if( kwstr == ""){
          url = `news/find/undefined`
        }else{
          url = `news/find/${kwstr}`
        }
        
        this.axios.get(url).then(res=>{
          console.log(res);
          this.newslistData = res.data.data
        })
      },
      enterSearch(){
        console.log("点查询1");
        this.searchkw()
      },
      handleSearch() {
        console.log("点查询2");
        this.searchkw()
      },
    getNewslistData(){
      let url = `news/list/""`
      this.axios.get(url).then(res=>{
        console.log(res);
        this.newslistData = res.data.data
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.pageArea{
  position: fixed;
  right: 20px;
  bottom: 10px;
}
</style>
